<template>
  <div>
      <div class="title" >
          <img :src="props.src" />
      </div>
      <!-- <div class="title2" v-else>
          {{ props.number }}
      </div> -->
  </div>
</template>


<script lang="ts" setup>
import {ref,onMounted,watch,onUpdated} from 'vue'
const props = defineProps({
  src: {
      type: String,
      required:true
  },
  number: {
      type: String,
      required:true
  }
})
const isImage=ref(false)
// const checkImgExists=(imgurl:string) =>{
// try{
//   var ImgObj = new Image();
//   ImgObj.src = imgurl;
//   ImgObj.onload = () => {
//     isImage.value = true;
//   };
//   ImgObj.onerror = () => {

//     isImage.value= false;
//   };
// }catch(error){
//   console.log('error')
// }

// }
// onUpdated(()=>{
//   setTimeout(()=>{
//       checkImgExists(props.src)
//   },1000)
// })
// onMounted(()=>{
//     setTimeout(()=>{
//       checkImgExists(props.src)
//   },1000)
// })


</script>
<style lang="scss" scoped>
.title {
  background-color: #fff;
  height:calc(70vh/var(--height)*190);
  line-height: calc(70vh/var(--height)*120);
  font-size: calc(70vh/var(--height)*40);
  color: #fff;
  overflow: hidden;
  position: relative;
  font-family: 'Calibri';
  img {
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
.title2 {
  background-color: #23445a;
  color: #fff;
  height: calc(70vh/var(--height)*190);
  line-height: calc(70vh/var(--height)*190);
  font-size: calc(70vh/var(--height)*40);
  text-align: center;
}
</style>

<style lang="scss" scoped>
@media (min-height: 1000px)  {
  .title {
      height:  190px;
      line-height: 120px;
      font-size: 40px;
  }
  .title2 {
    height:  190px;
      line-height: 190px;
      font-size: 40px;
  }
}
</style>